<template>
	<view class="reviews-page">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<text class="back-icon" @click="goBack">‹</text>
			<text class="page-title">商品评价</text>
			<view class="nav-right">
				<text class="nav-icon">⋯</text>
				<text class="nav-icon">−</text>
				<text class="nav-icon">◎</text>
			</view>
		</view>

		<!-- 筛选标签 -->
		<view class="filter-tabs">
			<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="selectTab('all')">
				<text class="tab-text">全部</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'good' }" @click="selectTab('good')">
				<text class="tab-text">好评{{ goodCount }}</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'neutral' }" @click="selectTab('neutral')">
				<text class="tab-text">中评{{ neutralCount }}</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'bad' }" @click="selectTab('bad')">
				<text class="tab-text">差评{{ badCount }}</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'withImage' }" @click="selectTab('withImage')">
				<text class="tab-text">有图{{ withImageCount }}</text>
			</view>
		</view>

		<!-- 评价列表 -->
		<view class="reviews-list">
			<view class="review-item" v-for="(review, index) in filteredReviews" :key="index">
				<view class="review-header">
					<image class="user-avatar" :src="review.avatar" mode="aspectFill"></image>
					<view class="user-info">
						<text class="username">{{ review.username }}</text>
						<text class="review-date">{{ review.date }}</text>
					</view>
					<view class="rating">
						<text class="star" v-for="i in review.rating" :key="i">★</text>
						<text class="star empty" v-for="i in (5 - review.rating)" :key="i">☆</text>
					</view>
				</view>
				<view class="review-content">
					<text class="review-text">{{ review.content }}</text>
					<text class="product-info">{{ review.productInfo }}</text>
				</view>
			</view>
		</view>

		<!-- 加载更多按钮 -->
		<view class="load-more-section">
			<button class="load-more-btn" @click="loadMore">加载更多</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'all',
				goodCount: 2,
				neutralCount: 0,
				badCount: 0,
				withImageCount: 0,
				allReviews: [
					{
						username: '*经蛙',
						date: '2025-06-17 02:05:02',
						content: '系统默认好评',
						productInfo: '佳能 EOS R5 全画幅 专业微单相机 R5 单机机身 24-105 套机 2222 - 好评',
						avatar: '/static/img/首页.png',
						rating: 5,
						type: 'good'
					},
					{
						username: '**已注销',
						date: '2024-07-13 02:05:01',
						content: '系统默认好评',
						productInfo: '佳能 EOS R5 全画幅 专业微单相机 R5 单机机身 24-105 套机 2222 - 好评',
						avatar: '/static/img/我的.png',
						rating: 5,
						type: 'good'
					}
				]
			}
		},
		computed: {
			filteredReviews() {
				if (this.activeTab === 'all') {
					return this.allReviews
				} else {
					return this.allReviews.filter(review => review.type === this.activeTab)
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectTab(tab) {
				this.activeTab = tab
				// 根据标签筛选评价
				this.filterReviews(tab)
			},
			filterReviews(tab) {
				// TODO: 根据标签筛选评价
				console.log('筛选标签:', tab)
			},
			loadMore() {
				// TODO: 加载更多评价
				uni.showToast({
					title: '加载更多评价',
					icon: 'none'
				})
			}
		}
	}
</script>

<style scoped>
	.reviews-page {
		background: #f5f5f5;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.nav-bar {
		background: #fff;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.back-icon {
		font-size: 20px;
		color: #333;
	}

	.page-title {
		font-size: 16px;
		color: #333;
		font-weight: bold;
	}

	.nav-right {
		display: flex;
		gap: 10px;
	}

	.nav-icon {
		font-size: 16px;
		color: #333;
	}

	/* 筛选标签 */
	.filter-tabs {
		background: #fff;
		display: flex;
		padding: 10px 15px;
		gap: 10px;
		border-bottom: 1px solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		height: 32px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.tab-item.active {
		background: #ff4444;
		border-color: #ff4444;
	}

	.tab-text {
		font-size: 12px;
		color: #333;
		transition: color 0.3s ease;
	}

	.tab-item.active .tab-text {
		color: #fff;
	}

	.tab-item:active {
		transform: scale(0.95);
	}

	/* 评价列表 */
	.reviews-list {
		background: #fff;
		margin-top: 10px;
	}

	.review-item {
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.review-item:last-child {
		border-bottom: none;
	}

	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.user-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
		background: #f0f0f0;
	}

	.user-info {
		flex: 1;
	}

	.username {
		font-size: 14px;
		color: #333;
		margin-bottom: 2px;
	}

	.review-date {
		font-size: 12px;
		color: #999;
	}

	.rating {
		display: flex;
		gap: 2px;
	}

	.star {
		font-size: 16px;
		color: #ffaa00;
	}

	.star.empty {
		color: #ddd;
	}

	.review-content {
		margin-left: 50px;
	}

	.review-text {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}

	.product-info {
		font-size: 12px;
		color: #999;
	}

	/* 加载更多 */
	.load-more-section {
		padding: 20px;
		text-align: center;
	}

	.load-more-btn {
		width: 100%;
		height: 40px;
		background: #f5f5f5;
		border: none;
		border-radius: 5px;
		color: #666;
		font-size: 14px;
	}
</style>
